<!--
@description ：计划任务配置
-->

<template>
  <div>
    <NormalForm pageTitle="" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt" @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="g-card">
      <div class="table-top">
        <div class="title">服务计划列表</div>
        <el-button type="primary" @click="setConfig" icon="el-icon-plus" size="mini" style="height: 36px!important;">
          新增服务计划
        </el-button>
      </div>
      <div style="padding: 0 20px 20px 20px">
        <el-table v-loading="loading" :data="tableList" style="width: 100%" height="475">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="任务类型" align="center" show-overflow-tooltip prop="tasktype" :min-width="160" :formatter="taskTypeFormatter"></el-table-column>
          <el-table-column label="保单类型" align="center" prop="policytype" show-overflow-tooltip :min-width="160" :formatter="insuranceTypeFormatter"/>
          <el-table-column label="管理机构" align="center" prop="institution" show-overflow-tooltip :min-width="160" :formatter="institutionFormatter">
          </el-table-column>
          <el-table-column label="渠道" align="center" prop="branchtype" show-overflow-tooltip :formatter="branchTypeFormatter">
          </el-table-column>
          <el-table-column label="修改时间" align="center" prop="updateTime" show-overflow-tooltip :min-width="170">
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="createby" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="修改人" align="center" prop="updateby" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" :min-width="220">
            <template slot-scope="scope">
              <div class="option-span">
                <el-button size="mini" type="text" @click="handleDetail(scope.row)">任务条件</el-button>
                <el-button size="mini" type="text" @click="toPlanConfig(scope.row)">计划详情</el-button>
                <el-button size="mini" type="text" @click="handleEdit(scope.row)">修改</el-button>
                <el-button size="mini" type="text" @click="handleDelete(scope.row)" style="color: rgb(226, 55, 55)!important">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
    </div>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="任务条件配置" width="700px">
      <el-form label-suffix=":" label-position="right" label-width="120px" ref="configForm" :model="configForm" :rules="configRules" :disabled="configFormDisabled">
        <el-form-item prop="tasktype" label="任务类型">
          <el-select v-model="configForm.tasktype" placeholder="请选择" clearable filterable style="width: 80%">
            <el-option v-for="item in enumOpt.taskTypeList" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="institution" label="管理机构">
          <el-select v-model="configForm.institution" placeholder="请选择" clearable filterable style="width: 80%">
            <el-option v-for="item in enumOpt.manageComList" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="branchtype" label="渠道">
          <el-select v-model="configForm.branchtype" placeholder="请选择" clearable filterable style="width: 80%">
            <el-option v-for="item in enumOpt.channelList" :key="item.dictValue" :value="item.dictValue" :label="item.dictLabel"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="policytype" label="保单类型">
          <el-radio-group v-model="configForm.policytype">
            <el-radio v-for="item in enumOpt.insuranceTypeList" :key="item.dictValue" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="交费间隔" prop="payintv">
          <el-checkbox-group v-model="configForm.payintv">
            <el-checkbox v-for="item in paymentIntervalList" :key="item.dictValue" :label="item.dictValue"
                         name="policyYear">
              {{ item.dictLabel }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="保单年度" prop="policyyear">
          <el-checkbox-group v-model="configForm.policyyear">
            <el-checkbox v-for="item in policyYearList" :key="item.dictValue" :label="item.dictValue"
                         name="policyyear">
              {{ item.dictLabel }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="应交保费" prop="premiumpayable">
          <el-input-number :precision="2" :step="0.1" v-model="configForm.premiumpayable[0]" aria-placeholder="请输入最小值" style="width: 38%"></el-input-number>
          -
          <el-input-number :precision="2" :step="0.1" v-model="configForm.premiumpayable[1]" aria-placeholder="请输入最大值" style="width: 38%"></el-input-number>
        </el-form-item>
        <el-form-item label="应交月" prop="paymonth">
          <el-date-picker
            v-model="configForm.paymonth"
            type="monthrange"
            range-separator="至"
            style="width: 80%"
            value-format="yyyyMM"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="保单标签" prop="policylabel">
          <el-checkbox-group v-model="configForm.policylabel">
            <el-checkbox v-for="item in policyLabelList" :key="item.dictValue" :label="item.dictValue"
                         name="policylabel">
              {{ item.dictLabel }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="drawer-fromBtn">
        <el-button type="primary" @click="handleSubmit" :disabled="configFormDisabled">去配置服务计划</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "plannedAllocation", //计划任务配置
  props:{

  },
  components:{

  },
  data(){
    const validatorPremiumpayable = (rule, value, callback) => {
        if(value[0] && value[1] && value[0] > value[1]){
          callback('应交保费最小值应小于最大值')
        }else {
          callback();
        }
    }
    return{
      queryForm: {
        tasktype: '',
        institution: '',
        branchtype: '',
        policytype: '',
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '任务类型',
          defaultNoLabel: true,
          formLabel: true,
          value: '',
          prop: 'tasktype',
          type: 'SELECT',
          emunName: 'taskTypeList',
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
        {
          label: '管理机构',
          defaultNoLabel: true,
          formLabel: true,
          value: '',
          prop: 'institution',
          type: 'SELECT',
          emunName: 'manageComList',
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
        {
          label: '渠道',
          defaultNoLabel: true,
          formLabel: true,
          value: '',
          prop: 'branchtype',
          type: 'SELECT',
          emunName: 'channelList',
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
        {
          label: '保单类型',
          defaultNoLabel: true,
          formLabel: true,
          value: '',
          prop: 'policytype',
          type: 'SELECT',
          emunName: 'insuranceTypeList',
          xs: 24,
          ls: 12,
          md: 10,
          lg: 8,
          xl: 6,
        },
      ],
      enumOpt: {
        taskTypeList: [],
        channelList: [],
        manageComList: [],
        insuranceTypeList: [],
      },

      tableList: [],
      loading: false,
      total: 0,

      dialogVisible: false,
      configForm: {
        tasktype: '',
        institution: '',
        branchtype: '',
        policytype: '',
        payintv: [],
        paymonth: [],
        premiumpayable: [0,0],
        policyyear: [],
        policylabel: []
      },
      configRules: {
        tasktype: { required: true, message: '请选择任务类型', trigger: ['blur', 'change'] },
        institution: { required: true, message: '请选择管理机构', trigger: ['blur', 'change'] },
        branchtype: { required: true, message: '请选择渠道', trigger: ['blur', 'change'] },
        policytype: { required: true, message: '请选择保单类型', trigger: ['blur', 'change'] },
        premiumpayable:  [{ validator: validatorPremiumpayable, trigger: ['blur', 'change'] }]
      },
      configFormDisabled: false,

      insuranceTypeList: [],
      paymentIntervalList: [],
      policyYearList: [],
      policyLabelList: [],
    }
  },
  watch:{

  },
  methods:{
    getDict() {
      this.getDicts("sys_renewal_channel").then((res) => {
        if (res.code === 200) {
          this.enumOpt.channelList = res.data
        }
      });
      this.getDicts("sys_renewal_manage_com").then((res) => {
        if (res.code === 200) {
          this.enumOpt.manageComList = res.data
        }
      });
      this.getDicts("sys_renewal_definition_task_type").then((res) => {
        if (res.code === 200) {
          this.enumOpt.taskTypeList = res.data
        }
      });
      this.getDicts("sys_renewal_insurance_type").then((res) => {
        if (res.code === 200) {
          this.enumOpt.insuranceTypeList = res.data
        }
      });
      this.getDicts("sys_renewal_payment_interval").then((res) => {
        if (res.code === 200) {
          this.paymentIntervalList = res.data
        }
      });
      this.getDicts("sys_renewal_policy_year").then((res) => {
        if (res.code === 200) {
          this.policyYearList = res.data
        }
      });
      this.getDicts("sys_renewal_policy_label").then((res) => {
        if (res.code === 200) {
          this.policyLabelList = res.data
        }
      });
    },
    taskTypeFormatter(row){
      if(row.tasktype) return this.selectDictLabel(this.enumOpt.taskTypeList, row.tasktype);
      else return ''
    },
    insuranceTypeFormatter(row){
      if(row.policytype) return this.selectDictLabel(this.enumOpt.insuranceTypeList, row.policytype);
      else return ''
    },
    institutionFormatter(row){
      if(row.institution) return this.selectDictLabel(this.enumOpt.manageComList, row.institution);
      else return ''
    },
    branchTypeFormatter(row){
      if(row.branchtype) return this.selectDictLabel(this.enumOpt.channelList, row.branchtype);
      else return ''
    },
    handleQuery(){
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset(){
      this.queryForm = {
        tasktype: '',
        institution: '',
        branchtype: '',
        policytype: '',
        pageNum: 1,
        pageSize: 20,
      }
      this.getListFn()
    },
    getListFn(){
      let obj = {
        ...this.queryForm
      }
      this.loading = true
      this.tableList = []
      this.api.getPlanedList(obj).then(res => {
        this.loading = false
        this.tableList = res.rows || []
        this.total = +res.total || 0
      }).catch(() => {
        this.loading = false
      })
    },
    handleCurrentChange(val){
      this.queryForm.pageNum = val
      this.getListFn()
    },
    handleSizeChange(val){
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getListFn()
    },
    handleDelete(row){
      this.$confirm('此操作将删除此条信息, 是否继续?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
         this.api.deletePlaned({serviceId: row.serviceId}).then(res => {
           if(res.code == 200){
             this.$message.success('删除成功')
             this.handleQuery()
           }else{
             this.$message.error(res.msg)
           }
         })
      }).catch(() => {})
    },
    setConfig(){
      this.dialogVisible = true
      this.configForm = {
        tasktype: '',
        institution: '',
        branchtype: '',
        policytype: '',
        payintv: [],
        paymonth: [],
        premiumpayable: [0,0],
        policyyear: [],
        policylabel: []
      }
      this.resetForm('configForm')
      this.configFormDisabled = false
    },

    handleEdit(row){
      console.log('serviceId:::::', row.serviceId, row)
       this.api.queryPlanedDetail({serviceId: row.serviceId}).then(res => {
         if(res.code == 200){
           this.dialogVisible = true
           this.configForm = {
             ...res.data,
             payintv: res.data.payintv ? res.data.payintv.split(',') : [],
             paymonth: res.data.paymonth ? res.data.paymonth.split(',') : [],
             premiumpayable: res.data.premiumpayable ? res.data.premiumpayable.split(',') : [0,0],
             policyyear: res.data.policyyear ? res.data.policyyear.split(',') : [],
             policylabel: res.data.policylabel ? res.data.policylabel.split(',') : []
           }
           this.resetForm('configForm')
           this.configFormDisabled = false
         }
       })
    },

    handleDetail(row){
      this.api.queryPlanedDetail({serviceId: row.serviceId}).then(res => {
        if(res.code == 200){
          this.dialogVisible = true
          this.configForm = {
            ...res.data,
            payintv: res.data.payintv ? res.data.payintv.split(',') : [],
            paymonth: res.data.paymonth ? res.data.paymonth.split(',') : [],
            premiumpayable: res.data.premiumpayable ? res.data.premiumpayable.split(',') : [0,0],
            policyyear: res.data.policyyear ? res.data.policyyear.split(',') : [],
            policylabel: res.data.policylabel ? res.data.policylabel.split(',') : []
          }
          this.resetForm('configForm')
          this.configFormDisabled = true
        }
      })
    },

    toPlanConfig(row){
      this.$router.push({
        name: 'ServicePlanConfig',
        query: {
          serviceId: row.serviceId
        }
      })
    },

    handleSubmit(){
       if(this.configFormDisabled) return
      this.$refs.configForm.validate(valid => {
        if(valid){
          let obj = {
            ...this.configForm,
            payintv: this.configForm.payintv ? this.configForm.payintv.toString() : '',
            paymonth: this.configForm.paymonth ? this.configForm.paymonth.toString() : '',
            premiumpayable: this.configForm.premiumpayable ? this.configForm.premiumpayable.toString() : '',
            policyyear: this.configForm.policyyear ? this.configForm.policyyear.toString() : '',
            policylabel: this.configForm.policylabel ? this.configForm.policylabel.toString() : '',
          }
          if(this.configForm.serviceId){
            this.api.editPlaned(obj).then(res => {
              if(res.code == 200){
                this.$message.success('编辑成功')
                this.dialogVisible = false
                this.$router.push({
                  name: 'ServicePlanConfig',
                  query: {
                    serviceId: this.configForm.serviceId
                  }
                })
              }else{
                this.$message.error(res.msg)
              }
            })
          }else{
            this.api.addPlaned(obj).then(res => {
              if(res.code == 200){
                this.$message.success('添加成功')
                this.dialogVisible = false
                this.$router.push({
                  name: 'ServicePlanConfig',
                  query: {
                    serviceId: res.data
                  }
                })
              }else{
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    }
  },
  mounted() {
    this.getDict()
    this.handleQuery()
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.table-top {
  padding: 20px;
  height: 72px;
  border-bottom: 1px dashed #d9d9d9;
  margin-bottom: 12px;
  //line-height: 32px;
  display: flex;
  justify-content: space-between;
  .title{
    font-size: 20px;
    line-height: 32px;
  }
}

.drawer-fromBtn{
  display: flex;
  justify-content: end;
  padding: 16px 32px 0 0;
}
</style>
